<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类数组得操作</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		
		<style type="text/css">
			ul{
				list-style: none;
			}
			
			li{
				border: 1px solid #eee;
				width: 200px;
				
			}
		</style>
	</head>
	<body>
		<ul id="list">
			<li>60</li>
			<li>70</li>
			<li>80</li>
			<li>90</li>
			<li>100</li>
		</ul>
		<script type="text/javascript">
			// jQuery对象就是类数组
			
			// 1. $(...).get(index) --> 获取下标对应的元素,从零开始
			// console.log($('#list>li').get(2));
			//  $(...).get() --> 放回一个包含DOM元素得原始JS数组
			// console.log($('#list>li').get());
			
			// 2. $(...).size()
			// console.log($('#list>li').size());
			
			// 3. $(...).each(callback(i, elem)): --> 将类数组内得数据填入callback作为参数, 依次调用
			
			// $('#list>li').each(function(i, elem){
			// 	var num = parseInt($(elem).html());
			// 	console.log(num + 10);
			// });
			// 		$.each(obj, callback):-->  将obj内得数据填入callback作为参数,一次调用.
			
			// var list = [11,22,33,44,55];
			// $.each(list, function(i, elem){
			// 	console.log(elem);
			// });
			
			// 区别: $(...).each挂在jQuery原型上, jQuery.fn --> 只有jQuery对象可以应用
					// $.each改在jQuery函数上 --> 任何地方都可以调用
			
			// 4. index()		
			
			// 练习: 分数低于60分得,颜色变红, 背景变黄
			
			$('#list>li').each(function(i, elem){
					var num = parseInt($(elem).html());
					if(num<=60){
						$(elem).css('background-color','#f00');
					}
			})
		</script>
	</body>
</html>
